<template>
  <div id="DataMaintenance-groupPostManage">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{
          $t("personnelSet.personnelSettings.groupPostManage.50zgzzjgvms0")
        }}</span>
      </div>
      <div class="cr-head-right">
        <el-button type="primary" size="mini" @click="handAdd">{{
          $t("personnelSet.personnelSettings.groupPostManage.50zgzzjgx7o0")
        }}</el-button>
      </div>
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="flex-al Inquire-box mb12">
        <div class="ipt-box" style="width: 250px">
          <el-input
            v-model="filter.keyword"
            clearable
            :placeholder="
              $t('personnelSet.personnelSettings.groupPostManage.50zgzzjgxkc0')
            "
            @clear="search"
            @keyup.enter.native="search"
          ></el-input>
        </div>
        <el-button
          type="primary"
          size="mini"
          class="search-btn fs14"
          @click="search"
          >{{
            $t("personnelSet.personnelSettings.groupPostManage.50zgzzjgxvc0")
          }}</el-button
        >
      </div>
      <div class="tableDiv" ref="auto_height_table">
        <settingTableCont
          :tableData="tableList"
          @handleSelectionChange="handleSelectionChange"
        >
          <!-- 按钮操作组********start -->
          <el-table-column
            ref="fixedColumn"
            :label="
              $t('personnelSet.personnelSettings.groupPostManage.50zgzzjgy6g0')
            "
            align="center"
            width="120px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="handEdit(scope.row)"
                >{{
                  $t(
                    "personnelSet.personnelSettings.groupPostManage.50zgzzjgyi80"
                  )
                }}</el-button
              >
              <el-button
                type="text"
                size="small"
                @click.native.prevent="handDelete(scope.row)"
                >{{
                  $t(
                    "personnelSet.personnelSettings.groupPostManage.50zgzzjgyw40"
                  )
                }}</el-button
              >
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </settingTableCont>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px"
          :current-page.sync="paging.curPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.pageTotal"
          @current-change="curPageChange"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 侧边弹窗 ******新增或者编辑职务-->
    <el-drawer
      :title="
        isEdit
          ? $t('personnelSet.personnelSettings.groupPostManage.50zgzzjgz9g0')
          : $t('personnelSet.personnelSettings.groupPostManage.50zgzzjgzko0')
      "
      :visible.sync="cancelVisible"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box"
      :before-close="handleClose"
    >
      <div class="slider-btn">
        <el-button
          v-if="!isEdit"
          type="primary"
          size="mini"
          @click="onSubmit"
          >{{
            $t("personnelSet.personnelSettings.groupPostManage.50zgzzjgzvg0")
          }}</el-button
        >
        <el-button v-else type="primary" size="mini" @click="onEditSubmit">{{
          $t("personnelSet.personnelSettings.groupPostManage.50zgzzjgzvg0")
        }}</el-button>
      </div>
      <div class="slider-content pAll20">
        <el-form
          label-width="80px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item
            :label="
              $t('personnelSet.personnelSettings.groupPostManage.50zgzzjh0cg0')
            "
            prop="post_name"
          >
            <el-input
              clearable
              :placeholder="
                $t(
                  'personnelSet.personnelSettings.groupPostManage.50zgzzjgxkc0'
                )
              "
              v-model="ruleForm.post_name"
              style="width: 320px"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('personnelSet.personnelSettings.groupPostManage.50zgzzjh0ro0')
            "
            prop="post_code"
          >
            <el-input
              clearable
              :placeholder="
                $t(
                  'personnelSet.personnelSettings.groupPostManage.50zgzzjh1440'
                )
              "
              v-model="ruleForm.post_code"
              style="width: 320px"
            ></el-input>
          </el-form-item>
          <!--
          <el-form-item :label="$t('personnelSet.personnelSettings.groupPostManage.50zgzzjh1f40')" prop="postlevel_id">
            <el-select
              v-model="ruleForm.postlevel_id"
              clearable
              filterable
              :placeholder="$t('personnelSet.personnelSettings.groupPostManage.50zgzzjh1rw0')"
              style="width:320px;"
            >
              <el-option
                v-for="item in filter.postLevelList"
                :key="item.postlevel_id"
                :label="item.postlevel_cnname"
                :value="item.postlevel_id"
              ></el-option>
            </el-select>
          </el-form-item>
          -->
          <el-form-item
            :label="
              $t('personnelSet.personnelSettings.groupPostManage.50zgzzjh2240')
            "
            prop="postrole_id"
          >
            <el-select
              v-model="ruleForm.postrole_id"
              clearable
              filterable
              :placeholder="
                $t(
                  'personnelSet.personnelSettings.groupPostManage.50zgzzjh2d00'
                )
              "
              style="width: 320px"
            >
              <el-option
                v-for="item in filter.postroleList"
                :key="item.postrole_id"
                :label="item.postrole_name"
                :value="item.postrole_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="
              $t('personnelSet.personnelSettings.groupPostManage.50zgzzjh2nk0')
            "
            prop="post_istopjob"
            label-width="140px"
          >
            <el-select
              v-model="ruleForm.post_istopjob"
              clearable
              filterable
              :placeholder="
                $t(
                  'personnelSet.personnelSettings.groupPostManage.50zgzzjh2x80'
                )
              "
              style="width: 260px"
            >
              <el-option
                :label="
                  $t(
                    'personnelSet.personnelSettings.groupPostManage.50zgzzjh3840'
                  )
                "
                value="1"
              ></el-option>
              <el-option
                :label="
                  $t(
                    'personnelSet.personnelSettings.groupPostManage.50zgzzjh3lg0'
                  )
                "
                value="0"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="
              $t('personnelSet.personnelSettings.groupPostManage.50zgzzjh3w00')
            "
            prop="post_remk"
          >
            <el-input
              type="textarea"
              clearable
              v-model="ruleForm.post_remk"
              autosize
              :placeholder="
                $t(
                  'personnelSet.personnelSettings.groupPostManage.50zgzzjh45s0'
                )
              "
              style="width: 320px"
            ></el-input>
          </el-form-item>
          <p class="color-red">
            *
            {{
              $t("personnelSet.personnelSettings.groupPostManage.50zgzzjh4ec0")
            }}
          </p>
        </el-form>
      </div>
    </el-drawer>
    <!-- 删除职务 -->
    <popTips
      :dialogVisable="delItem"
      :popTipsCont="popTips_del"
      @handConfirm="delAction"
      @handCancel="delItem = false"
      @handleCloseTip="delItem = false"
    ></popTips>
  </div>
</template>

<script>
import settingTableCont from "@/components/tables/settingTableCont.vue";
import popTips from "@/components/common/popTips/popTips.vue";
import setHttp from "../../Set";

export default {
  name: "setting",
  components: {
    settingTableCont,
    popTips,
  },
  data() {
    return {
      delItem: false, //删除职务
      cancelVisible: false, //新增或者编辑职务
      isEdit: false, //是否编辑职务
      postId: "",
      //删除职务****弹窗
      popTips_del: {
        btn_text1: this.$t(
          "personnelSet.personnelSettings.groupPostManage.50zgzzjh4nc0"
        ),
        btn_text2: this.$t(
          "personnelSet.personnelSettings.groupPostManage.50zgzzjh4vs0"
        ),
        title: this.$t(
          "personnelSet.personnelSettings.groupPostManage.50zgzzjh54k0"
        ),
        context: this.$t(
          "personnelSet.personnelSettings.groupPostManage.50zgzzjh5dc0"
        ),
      },
      //筛选
      filter: {
        keyword: "",
        postroleList: [],
        postLevelList: [],
      },
      // 表格数据
      tableList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0,
        },
      },
      // 分页
      paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      // 表单
      ruleForm: {
        post_name: "",
        post_remk: "",
        // postlevel_id: "",
        postrole_id: "",
        post_istopjob: "",
        post_code: "",
      },
      // 表单验证
      rules: {
        post_name: [
          {
            required: true,
            message: this.$t(
              "personnelSet.personnelSettings.groupPostManage.50zgzzjgxkc0"
            ),
            trigger: "blur",
          },
        ],
        post_code: [
          {
            required: true,
            message: this.$t(
              "personnelSet.personnelSettings.groupPostManage.50zgzzjh1440"
            ),
            trigger: "blur",
          },
        ],
        // postlevel_id: [
        //   {
        //     required: false,
        //     message: this.$t(
        //       "personnelSet.personnelSettings.groupPostManage.50zgzzjh1rw0"
        //     ),
        //     trigger: "change",
        //   },
        // ],
        postrole_id: [
          {
            required: true,
            message: this.$t(
              "personnelSet.personnelSettings.groupPostManage.50zgzzjh2d00"
            ),
            trigger: "change",
          },
        ],
        post_istopjob: [
          {
            required: true,
            message: this.$t(
              "personnelSet.personnelSettings.groupPostManage.50zgzzjh2x80"
            ),
            trigger: "change",
          },
        ],
        post_remk: [
          {
            required: false,
            message: "",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getPost();
    this.getPostroleApi(); // 通用->获取集团角色下拉列表
    this.getPostLevelApi(); // 通用->获取职等下拉列表
  },
  methods: {
    //人事相关设置->职务列表
    getPost() {
      setHttp
        .getPost({
          is_count: "1", //是否需要总数，可以不传
          p: this.paging.curPage,
          num: this.paging.pageSize,
          post_type: "0",
          //筛选条件
          keyword: this.filter.keyword,
        })
        .then((res) => {
          this.paging.pageTotal = parseInt(res.data.result.all_num);
          this.tableList.columns = res.data.result.field;
          if (res.data.error == 0) {
            this.tableList.list = res.data.result.list;
          } else {
            this.tableList.list = [];
            this.tableList.options.errortip = res.data.errortip;
          }
        });
    },
    //检索
    search() {
      this.paging.curPage = 1;
      this.getPost();
    },
    //新增
    handAdd() {
      this.isEdit = false; //是否编辑产品
      this.cancelVisible = !this.cancelVisible;
      this.resetForm("ruleForm");
    },
    //编辑
    handEdit(v) {
      this.postId = v.post_id;
      this.resetForm("ruleForm");
      this.ruleForm = {
        post_name: v.post_name,
        // postlevel_id: v.postlevel_id,
        postrole_id: v.postrole_id,
        post_istopjob: v.post_istopjob,
        post_remk: v.post_remk,
        post_code: v.post_code,
      };
      this.isEdit = true;
      this.cancelVisible = !this.cancelVisible;
    },
    //删除
    handDelete(row) {
      this.postId = row.post_id;
      this.delItem = !this.delItem;
    },
    //删除职务
    delAction() {
      setHttp
        .delPostAction({
          post_id: this.postId,
        })
        .then((res) => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.delItem = false;
            this.getPost();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },

    //侧边弹窗 - 新增 - 提交
    onSubmit() {
      let canSubmit = this.$Tool.isNull("ruleForm", this);
      if (canSubmit) {
        setHttp
          .addPostAction({
            post_type: "0",
            post_name: this.ruleForm.post_name,
            post_remk: this.ruleForm.post_remk,
            // postlevel_id: this.ruleForm.postlevel_id,
            postrole_id: this.ruleForm.postrole_id,
            post_istopjob: this.ruleForm.post_istopjob,
            post_code: this.ruleForm.post_code,
          })
          .then((res) => {
            if (res.data.error == 0) {
              this.$message({ message: res.data.errortip, type: "success" });
              this.cancelVisible = false;
              this.getPost();
            } else {
              this.$message.error(res.data.errortip);
            }
          });
      }
      // this.$refs.ruleForm.validate(val => {
      //   if (val) {
      //     setHttp
      //       .addPostAction({
      //         post_type: "0",
      //         post_name: this.ruleForm.post_name,
      //         post_remk: this.ruleForm.post_remk,
      //         postlevel_id: this.ruleForm.postlevel_id,
      //         postrole_id: this.ruleForm.postrole_id
      //       })
      //       .then(res => {
      //         if (res.data.error == 0) {
      //           this.$message({ message: res.data.errortip, type: "success" });
      //           this.cancelVisible = false;
      //           this.getPost();
      //         } else {
      //           this.$message.error(res.data.errortip);
      //         }
      //       });
      //   } else {
      //   }
      // });
    },
    //侧边弹窗 - 编辑 - 提交
    onEditSubmit() {
      this.$refs.ruleForm.validate((val) => {
        if (val) {
          setHttp
            .updatePostAction({
              post_id: this.postId,
              post_type: "0",
              post_name: this.ruleForm.post_name,
              post_remk: this.ruleForm.post_remk,
              // postlevel_id: this.ruleForm.postlevel_id,
              postrole_id: this.ruleForm.postrole_id,
              post_istopjob: this.ruleForm.post_istopjob,
              post_code: this.ruleForm.post_code,
            })
            .then((res) => {
              if (res.data.error == 0) {
                this.$message({ message: res.data.errortip, type: "success" });
                this.cancelVisible = false;
                this.getPost();
              } else {
                this.$message.error(res.data.errortip);
              }
            });
        } else {
          return false;
        }
      });
    },
    // 通用->获取集团角色下拉列表
    getPostroleApi() {
      this.$http.getPostroleApi({}).then((res) => {
        if (res.data.error == 0) {
          console.log(res.data);
          this.filter.postroleList = res.data.result.list;
        } else {
          this.filter.postroleList = [];
        }
      });
    },
    // 通用->获取职等下拉列表
    getPostLevelApi() {
      this.$http.getPostLevelApi({}).then((res) => {
        if (res.data.error == 0) {
          this.filter.postLevelList = res.data.result.list;
        } else {
          this.filter.postLevelList = [];
        }
      });
    },
    // 复选框
    handleSelectionChange(v) {
      console.log(v);
    },
    // 页码变化
    curPageChange(v) {
      this.paging.curPage = v;
      this.getPost();
    },
    // pageSize改变
    pageSizeChange() {
      this.paging.curPage = 1;
      this.getPost();
    },
    // 重置表单
    resetForm(form) {
      // 数据清空
      this.ruleForm = {
        post_name: "",
        post_remk: "",
        // postlevel_id: "",
        postrole_id: "",
        post_istopjob: "",
      };
      if (this.$refs[form]) {
        this.$refs[form].resetFields();
      }
    },
    //侧边弹窗-关闭
    handleClose(done) {
      done();
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 55
        );
      }
    });
  },
};
</script>

<style lang="less">
// #DataMaintenance-groupPostManage {
// }
</style>
